<template>
    <div class="app-container">
      <section  v-if="mode==1">
        <div class="operation-header">
          <el-button type="primary" size="mini" @click="editToggle(2)">
            <i class="el-icon-plus" />
            新增用户
          </el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column label="序号" sortable width="50">
            <template slot-scope="scope">
              {{ scope.row.sortIndex }}
            </template>
          </el-table-column>
          <el-table-column label="用户名" sortable>
            <template slot-scope="scope">
              {{ scope.row.username }}
            </template>
          </el-table-column>
          <el-table-column label="状态" sortable>
            <template slot-scope="scope">
              {{ scope.row.status }}
            </template>
          </el-table-column>
          <el-table-column label="密码">
            <template slot-scope="scope">
              {{ scope.row.password }}
            </template>
          </el-table-column>
          <el-table-column label="昵称" sortable>
            <template slot-scope="scope">
              {{ scope.row.nickname }}
            </template>
          </el-table-column>
  
          <el-table-column label="创建时间" sortable>
            <template slot-scope="scope">
              {{ scope.row.regDate }}
            </template>
          </el-table-column>
  
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="editItem(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-if="!listLoading"
          style="margin-top: 20px;"
          :current-page="currentPage"
          background
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </section>
  
      <section class="edit-section" v-if="mode==2">
        <div class="add-new-header">
          <span>
            <i class="el-icon-circle-plus-outline" />
            {{ editTitle }}
          </span>
          <span class="close" @click="editToggle(1)">
            <i class="el-icon-close" />
          </span>
        </div>
        <div class="form">  
          <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
            <el-form-item label="用户名" prop="username">
              <el-input class="input" readonly v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>

            <el-form-item label="昵称" prop="nickname">
              <el-input class="input" v-model="form.nickname" placeholder="请输入昵称"></el-input>
            </el-form-item>
  
            <el-form-item label="密码" prop="password">
              <el-input class="input" type="password" v-model="form.password" placeholder="请输入密码"></el-input>
            </el-form-item>
  
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input class="input" type="password" v-model="form.confirmPassword" placeholder="请确认密码"></el-input>
            </el-form-item>
  
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
  
          </el-form>
        </div>
      </section>
    </div>
  </template>
  
  <script>
  import { getUserAll, addUser, updataUser } from '@/api/user'
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        list: [
          // {
          //   username: 'niubi',
          //   nickname: 'niubiniubi',
          //   status: '正常',
          //   password: '123456',
          //   createTime: '2024-11-02 12:12:12'
          // }
        ],
        currentPage: 1,
        pageSize: 20,
        total: 0,
        listLoading: false,
        editTitle: '新增用户',
        mode: 1,
        form: {
          username: '',
          nickname: '',
          password: '',
          confirmPassword: '',
          id: ''
        },
        fileList: [],
        rules: {
            username: [
                { required: false, message: '请输入用户名', trigger: 'blur' }
            ],
            nickname: [
                { required: false, message: '请输入昵称', trigger: 'blur' }
            ],
            password: [
                { required: false, message: '请输入密码', trigger: 'blur' }
            ],
            confirmPassword: [
                { required: false, validator: validatePass2, trigger: 'blur' }
            ]
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        let params = {
          pageSize: this.pageSize,
          pageNum: this.currentPage
        }
        getUserAll(params).then(res => {
          res.data.data.forEach((element, index) => {
            element.sortIndex = index+1
          });
          this.list = res.data.data
          this.total = res.data.total
          this.listLoading = false
        })
      },
      handleCurrentChange(newPage) {
        this.currentPage = newPage
        this.fetchData()
      },
      editToggle (mode) {
        this.mode = mode
        this.editTitle = '新增用户'
        this.form = {
        username: '',
          nickname: '',
          password: '',
          confirmPassword: '',
          id: ''
        }
        if (mode == 1) {
          this.fetchData()
        }
      },
      editItem (item) {
        this.mode = 2
        this.editTitle = '编辑用户'
        this.form = {
          username: item.username,
          nickname: item.nickname,
          password: '',
          confirmPassword: '',
          id: item.id
        }
      },
      onSubmit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            let data = {
              nickname: this.form.nickname,
              username: this.form.username,
              password: this.form.password
            }
            if (this.mode == 1) {
              addUser(data).then(res => {
                this.$message({
                  message: '添加成功',
                  type: 'success',
                  duration: 5 * 1000
                })
              })
            } else {
              data.uid = this.form.id
              updataUser(data).then(res => {
                this.$message({
                  message: '修改成功',
                  type: 'success',
                  duration: 5 * 1000
                })
              })
            }
          
          }
        })
      },
      reset () {
        this.$refs['ruleForm'].resetFields();
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .app-container {
    width: 100%;
  }
  .operation-header{
    margin-bottom: 20px;
  }
  .edit-section {
    width: 100%;
    .add-new-header {
      width: 100%;
      background-color: #F8F8F8;  
      height: 50px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      .close {
        font-size: 20px;
        cursor: pointer;
      }
    }
    .form {
      margin-top: 20px;
      .input {
        max-width: 400px;
      }
    }
  }
  
  </style>
  